const list = document.querySelector('.list')
const getStudentClass = async () => {
  const { data: res } = await axios({
    url: 'http://ajax-api.itheima.net/students',
  })
  const htmlStr = res.data
    .map((item) => {
      return `<tr>
    <td>${item.name}</td>
    <td>${item.age}</td>
    <td>${item.gender ? '男' : '女'}</td>
    <td>第${item.group}组</td>
    <td>${item.hope_salary}</td>
    <td>${item.salary}</td>
    <td>${item.province + item.city + item.area}</td>
    <td>
      <a href="javascript:;" class="text-success mr-3"
        ><i class="bi bi-pen" data-id="${item.id}"></i
      ></a>
      <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id="${
        item.id
      }"></i></a>
    </td>
  </tr>`
    })
    .join('')
  list.innerHTML = htmlStr
  total.innerHTML = res.data.length
}

getStudentClass()
// 初始化模态框 & 城市选择
// bootstrap的模态框直接cv即可
const modalBox = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalBox)
const ps = document.querySelector('[name=province]')
const cs = document.querySelector('[name=city]')
const as = document.querySelector('[name=area]')
const addbtn = document.querySelector('#openModal')
const form = document.querySelector('#form')
const submitbtn = document.querySelector('#submit')
const total = document.querySelector('.total')
const modalTitle= document.querySelector('.modal-title');

addbtn.addEventListener('click', function () {
  form.reset()
  modalBox.dataset.id = 'add'
  modalTitle.innerHTML='添加学员'
  modal.show()
  
  cs.innerHTML = `<option value="">--城市--</option>`
  as.innerHTML = `<option value="">--地区--</option>`
})
const initCity = async () => {
  const { data: res } = await axios({
    url: '/api/province',
  })
  const proList = res.list
    .map((item) => {
      return `<option value="${item}">${item}</option>`
    })
    .join('')
  ps.innerHTML = `<option value="">--省份--</option>+${proList}`
  ps.addEventListener('change', async function () {
    cs.innerHTML = `<option value="">--城市--</option>`
    as.innerHTML = `<option value="">--地区--</option>`
    if (!ps.value) {
      return
    }
    const { data: res } = await axios({
      url: '/api/city',
      params: { pname: ps.value },
    })
    const cityList = res.list
      .map((item) => {
        return `<option value="${item}">${item}</option>`
      })
      .join('')
    cs.innerHTML = `<option value="">--城市--</option>+${cityList}`
    cs.addEventListener('change', async function () {
      as.innerHTML = `<option value="">--地区--</option>`
      if (!cs.value) {
        return
      }
      const { data: res } = await axios({
        url: '/api/area',
        params: { pname: ps.value, cname: cs.value },
      })
      const areaList = res.list
        .map((item) => {
          return `<option value="${item}">${item}</option>`
        })
        .join('')
      as.innerHTML = `<option value="">--地区--</option>+${areaList}`
    })
  })
}
initCity()
submitbtn.addEventListener('click', async function () {
  const data = serialize(form, { hash: true })
   modalBox.querySelector('#cb01').checked ? (data.gender = 1) : (data.gender = 0)
  data.age = +data.age
  data.gender = +data.gender
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
  data.group = +data.group
  if (modalBox.dataset.id==='add') {
    try {
      const { data: res } = await axios({
        url: '/students',
        method: 'post',
        data,
      })
      alert('添加成功')
      getStudentClass()
      modal.hide()
    } catch (error) {
      alert(error)
    }
  }else if (modalBox.dataset.id!=='add') {
    try {
      const { data: res } = await axios({
        url: '/students/'+modalBox.dataset.id,
        method: 'put',
        data,
      })
      alert('修改成功')
      getStudentClass()
      modal.hide()
    } catch (error) {
      alert(error)
    }
  }
})
list.addEventListener('click', async function (e) {
  const id = e.target.dataset.id
  if (e.target.classList.contains('bi-pen')) {
    const { data: res } = await axios({
      url: '/students/' + id,
    })
    modalBox.dataset.id = id
    modalTitle.innerHTML='修改学员'

    modal.show()
    const nodeList = modalBox.querySelectorAll('[name')
    nodeList.forEach((item) => {
      if (item.name === 'gender') {
        res.data[item.name]
          ? (modalBox.querySelector('#cb01').checked = true)
          : (modalBox.querySelector('#cb02').checked = true)
      }
      item.value = res.data[item.name]
    })
    const { data: citiData } = await axios({
      url: '/api/city',
      params: { pname: ps.value },
    })
    const cityList = citiData.list
      .map((item) => {
        return `<option value="${item}">${item}</option>`
      })
      .join('')
    cs.innerHTML = `<option value="">--城市--</option>+${cityList}`
    cs.value = res.data.city

    const { data: areaData } = await axios({
      url: '/api/area',
      params: { pname: ps.value, cname: cs.value },
    })
    const areaList = areaData.list
      .map((item) => {
        return `<option value="${item}">${item}</option>`
      })
      .join('')
    as.innerHTML = `<option value="">--地区--</option>+${areaList}`
    as.value=res.data.area
  }

  if (e.target.classList.contains('bi-trash')) {
    const res = await axios({ url: "/students/" + id, method: "DELETE" })
    alert('删除成功')
    getStudentClass()
  }
})
